<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			background-color: #333;
		}

		.ball {
			position: absolute;
			left: -25px;
			top: -25px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: rgb(255, 119, 51);
		}

		.pointer {
			position: absolute;
			width: 1px;
			height: 1px;
			border-radius: 50%;
			background-color: transparent;
			border: 1px solid #fff;
			animation: big .3s;
		}

		@keyframes big {
			from {
				transform: scale(1);
                opacity: 1;
			}

			to {
				transform: scale(10);
                opacity: 0;
			}
		}
	</style>
</head>

<body>
	<div class="ball"></div>
	<script>
		window.addEventListener('click', e => {
			const pointer = document.createElement('div')
			pointer.classList.add('pointer');
			pointer.style.left = `${e.clientX}px`;
			pointer.style.top = `${e.clientY}px`;
			document.body.appendChild(pointer)
			pointer.addEventListener('animationend', () => {
				pointer.remove()
			})

			const x = e.clientX;
			const y = e.clientY;
			move(x, y);
		})
		const ball = document.querySelector('.ball')
		function init() {
			const x = window.innerWidth / 2;
			const y = window.innerHeight / 2;
			ball.style.transform = `translate(${x}px,${y}px)`;
		}
		init()
		function move(x, y) {
			const ballRect = ball.getBoundingClientRect()
			const initX = ballRect.left + ballRect.width / 2
			const initY = ballRect.top + ballRect.height / 2
			const rad = Math.atan2(y - initY, x - initX)
			const deg = (rad * 180) / Math.PI
			ball.getAnimations().forEach(animation => animation.cancel())
			ball.animate(
				[
					{
						transform: `translate(${initX}px,${initY}px) rotate(${deg}deg)`,
						easing: 'ease-out'
					},
					{
						transform: `translate(${initX}px,${initY}px) rotate(${deg}deg) scaleX(1.5)`,
						offset: 0.6
					},
					{
						transform: `translate(${x}px,${y}px) rotate(${deg}deg) scaleX(1.5)`,
						offset: 0.8,
						easing: 'ease-in'
					},
					{
						transform: `translate(${x}px,${y}px)`
					}
				],
				{
					duration: 1000,
					fill: 'forwards',
					// easing:''
				}
			)
		}

	</script>
</body>

</html>